<template>
  <div class="about" v-bind:style="{height: fullHeight,minHeight: fullHeight}">
    <div class="calc3">
      <div class="headline3">
        <hgroup>
          <h2>平台简介</h2>
          <span>平台的发展历程、获得荣誉以及联系方式</span>
        </hgroup>
        <img src="../../assets/headerline.png" alt="">
      </div>
      <div class="plantInfo">
        <p>学啦网创立于2018年1月，以“让学习诗词更简单”为使命，为学习者提供优质服务，产品全面，价格透明，全年365天24小时400电话采购，并提供丰富的后续服务和保障。</p>
        <p>目前，学啦网提供8万余首诗词供学习者选择，涵盖唐诗宋词等，已成功服务累计超过400万人次。</p>
        <p>同时基于购学网全球中文诗词目录以及中文学啦社区，可以更好地帮助用户了解产品信息，安全有效的进行学习。</p>
      </div>
    </div>
  </div>
</template>

<script>
// 关于页面
export default {
  name: 'about',
  data () {
    return {
      fullHeight: document.documentElement.clientHeight - 85 + 'px',
      noUnit: document.documentElement.clientHeight - 85 // 不带单位的当前屏幕的高度，做对比用
    }
  },
  mounted () {
    let that = this
    window.onresize = function temp () {
      let differenceVal = document.documentElement.clientHeight - 85 - that.noUnit
      // 如果为负数，说明当前高度小于初始化页面的高度，有虚拟导航之类的情况出现，反之则虚拟导航被隐藏
      if (differenceVal > 0 && differenceVal < 150) { // 小于150说明排除键盘弹出的情况
        that.fullHeight = document.documentElement.clientHeight - 85 + 'px'
      } else if (differenceVal <= 0 && differenceVal > -150) {
        that.fullHeight = that.noUnit + 'px'
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
.about{
  width: 3.75rem;
  .calc3{
    width: 3.75rem;height: 100%;
    .headline3{
      width: 3.75rem;height: 0.8rem;position: relative;
      img{width: 100%;height: 100%;position: absolute;left: 0;top: 0;}
      hgroup{position: absolute;z-index: 2;color: #fff;text-align: left;padding: 0.1rem 0 0 0.2rem;}
    }
    .plantInfo{
      padding: 0.2rem 0.1rem;
      p{text-indent: 0.28rem;text-align: left;font-size: 0.14rem;margin-bottom: 0.2rem;}
    }
  }
}
</style>
